<!DOCTYPE html>
<html>
	<head>
			<meta charset="utf-8">
			<title></title>
			
			<script src="jquery-3.7.1.js"></script>
		</head>
		<body>
			
			<div id="div01" class="one">1</div>
			<div id="div02">2</div>
			<div class="one">3</div>
			<div>4</div>
	
			
			<script>
				
				
				console.log($);
				
				
				$("#div01").text("你好,jQuery!")
				$("#div02").html("<a href='https://wwww.baidu.com'>百度</a>")
				
				$("div").css("background-color","lightblue");
				
				$(".one").css("background-color","red");
				
				
				
				
			</script>
			用户名:<input type="text" id="username" /><br />
			<script>
				
				console.log($("#div01").text())
			
				$("#username").val("abc")
				console.log($("#username").val())
			</script>
			
			<div id="div05" abc="aaa">aaaaa</div>
			<script>
				
				console.log($("#div05").attr("abc"))
				
				$("#div05").attr("name","bbbb");
			
				$("#div05").removeAttr("name")
			</script>		
			<div id="div06"></div>
					<script>
									
						$("#div06").css("width","50px");
						$("#div06").css("height","50px");
						$("#div06").css("background-color","green");
					</script>
					<div id="div07" style="width: 50px;height: 50px;" ></div>
					<button id="btn07a">添加class</button>
					<button id="btn07b">删除class</button>
					<button id="btn07c">切换</button>
					<script>
						
						$("#btn07a").click(function(){
							$("#div07").addClass("two");				
						});
						$("#btn07b").click(function(){
							$("#div07").removeClass("two");
						});
						$("#btn07c").click(function(){
							$("#div07").toggleClass("two");
						});
					</script>
		</body>
	</html>